import { memo } from "react"
import { useDispatch } from "react-redux"
import useRequest from "../hooks/useRequest"
import { keywordChange } from "../store/photo/photoSlice"
export interface HotSearch {
  data?: string[]
  end_state?: number,
  error?: number,
  total?: number
}
const YiHotSearch: React.FC = () => {
  const [data]: [HotSearch] = useRequest("http://47.93.31.63:8000/hotsearch", { method: 'GET' })
  const dispatch = useDispatch()
  const handleClick = (item: string) => {
    dispatch(keywordChange({ keyword: item }))
  }
  return (
    <div className="box-border p-2 border-t-2 border-gray-200 mt-2 w-screen">
      <h2 className="inline-block h-8 font-bold box-border mb-2 transition duration-500 hover:text-xl hover:font-black hover:translate-x-4 hover:bg-gradient-to-r from-white via-gray-500 to-gray-700 rounded-md">热门搜索: </h2>
      <ul className="overflow-x-auto overflow-y-hidden flex justify-between w-full py-2">
        {
          data?.data?.map((item) => {
            return <li key={item} onClick={() => handleClick(item)} className="mr-2 flex justify-center items-center box-border p-2 bg-gray-700 text-white rounded-md hover:scale-110 cursor-pointer whitespace-nowrap">
              {item}
            </li>
          })
        }
      </ul>
    </div>
  )
}

export default memo(YiHotSearch)